<template>
  <div class="header_information page-container">
    <!-- 头部 -->
    <el-row class="header_name">
      <el-col :span="24" class="header_text">
        <h1>参赛审核</h1>
      </el-col>
      <el-col :span="24">
        <div class="header_line"></div>
      </el-col>
    </el-row>
    <!-- 按钮 -->
    <el-row class="el_row_btn">
      <el-col :span="24" class="content">
        <div class="content_top_btn">
          <el-space wrap>
            <el-input
              class="input-default-width"
              size="large"
              clearable
              placeholder="请输入姓名"
              v-model="query_data.studentName"
            ></el-input>
            <el-input
              class="input-default-width"
              size="large"
              clearable
              placeholder="请输入手机号"
              v-model="query_data.phone"
            ></el-input>
            <!-- 组委会选择 -->
            <OrganizingSelect
              v-model="query_data.agentId"
              v-if="is_show_organizing"
            />
            <!-- 机构选择 -->
            <InstitutionSelect
              :disabled="!query_data.agentId"
              :agentId="query_data.agentId"
              v-model="query_data.institutionId"
            />
            <!-- 参赛选择 -->
            <EventSelect v-model="query_data.rootId" />
            <!-- 分组选择 -->
            <GroupsSelect v-model="query_data.groupId" />
            <!-- 状态选择 -->
            <EntrystatusSelect v-model="query_data.payStatus" />
            <el-button
              size="large"
              :icon="Search"
              circle
              :loading="loading"
              @click="handleSearch"
            />
            <ExportButton
              :handle="handleGetCustomList"
              filename="审核人员"
              :columns="export_competition_columns"
            />
          </el-space>
        </div>
      </el-col>
    </el-row>
    <!-- 内容 -->
    <el-row>
      <el-col :span="24">
        <el-table
          empty-text="暂无数据..."
          :data="data"
          border
          style="width: 100%"
          fixed
          v-loading="loading"
        >
          <el-table-column prop="studentId" label="学生ID" width="80" />
          <el-table-column
            prop="agentName"
            label="组委会名称"
            v-if="is_show_organizing"
            width="150"
          />
          <el-table-column
            prop="informationName"
            label="机构名称"
            width="150"
          />
          <el-table-column label="老师姓名" width="100" align="center">
            <template #default="scope">
              <span v-if="scope.row.teacherName">{{
                scope.row.teacherName
              }}</span>
              <span v-else>---</span>
            </template>
          </el-table-column>
          <el-table-column label="比赛项目" prop="eventName" width="200">
            <template #default="scope">
              {{ scope.row.eventName }}({{ scope.row.playingTime }})
            </template>
          </el-table-column>
          <el-table-column prop="studentName" label="姓名" width="100" />
          <el-table-column
            prop="documentType"
            label="身份类型"
            width="100"
            align="center"
          >
            <template v-slot="{ row }">
              <el-tag class="ml-2" v-if="row.documentType == 'idcard'"
                >身份证</el-tag
              >
              <el-tag
                class="ml-2"
                type="success"
                v-if="row.documentType == 'passport'"
                >护照</el-tag
              >
              <el-tag
                class="ml-2"
                type="success"
                v-if="row.documentType == 'hcpassport'"
                >港澳通行证</el-tag
              >
              <el-tag
                class="ml-2"
                type="success"
                v-if="row.documentType == 'taiwanesesyndrome'"
                >台胞证</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="documentNumber" label="类型号码" width="200">
            <template v-slot="{ row }">
              {{ row.documentNumber }}
            </template>
          </el-table-column>

          <!-- <el-table-column
            prop="phone"
            label="证件照"
            width="120"
          /> -->
          <!-- <el-table-column
            prop="phone"
            label="证件号"
            width="120"
          /> -->
          <el-table-column prop="phone" label="手机号" width="120" />
          <el-table-column prop="schoolName" label="学校" width="150" />
          <!-- <el-table-column prop="awards" label="奖项" width="150" /> -->
          <el-table-column prop="entryNumber" label="参赛证号" width="220">
            <template v-slot="{ row }">
              {{ row.entryNumber ?? "-" }}
            </template>
          </el-table-column>
          <el-table-column prop="gender" label="性别" width="60">
            <template v-slot="{ row }">
              <el-tag type="error" v-if="row.gender == 0"> 女 </el-tag>
              <el-tag type="primary" v-else-if="row.gender == 1"> 男 </el-tag>
              <el-tag type="info" v-else> 保密 </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            prop="state"
            label="参赛状态"
            align="center"
            width="100"
          >
            <template v-slot="{ row }">
              <el-tag type="danger" v-if="row.entryStatus == 0">
                未通过
              </el-tag>
              <el-tag type="info" v-if="row.entryStatus == 1"> 未报名 </el-tag>
              <el-tag type="warning" v-if="row.entryStatus == 2">
                待审核
              </el-tag>
              <el-tag type="primary" v-if="row.entryStatus == 3">
                待绑定
              </el-tag>
              <el-tag type="success" v-if="row.entryStatus == 4">
                已绑定
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column fixed="right" prop="zip" label="操作" width="100">
            <template v-slot="{ row }">
              <el-dropdown
                trigger="click"
                @command="
                  (value) => {
                    handleCommand(value, row);
                  }
                "
                v-if="
                  is_show_organizing ||
                  row.entryStatus == 2 ||
                  row.entryStatus == 3
                "
              >
                <span class="el-dropdown-link">
                  操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <!-- 激活在学员未绑定时出现 -->
                    <el-dropdown-item
                      command="update-entryStatus-to-4"
                      v-if="row.entryStatus == 3"
                      :disabled="!is_show_organizing"
                    >
                      激活绑定
                    </el-dropdown-item>
                    <!-- 撤销报名 -->
                    <!-- 1级可以随时撤销报名 2级在审核通过后无法撤销报名 -->
                    <el-dropdown-item
                      command="cancellation-of-registration"
                      v-if="is_show_organizing || row.entryStatus == 2"
                    >
                      撤销报名
                    </el-dropdown-item>
                    <!--这个只能1级用 -->
                    <!-- 通过审核 -->
                    <el-dropdown-item
                      v-if="row.entryStatus == 2 || is_show_organizing"
                      command="update-entryStatus-to-3"
                    >
                      通过审核
                    </el-dropdown-item>
                    <!-- 拒绝审核 -->
                    <el-dropdown-item
                      v-if="is_show_organizing"
                      command="update-entryStatus-to-1"
                    >
                      拒绝审核
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <el-text v-else>-</el-text>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next, total"
        :total="total"
        @current-change="handlePage"
      />
    </div>
  </div>
</template>

<script  setup>
import { Search } from "@element-plus/icons-vue";
import { computed, onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { usePage } from "@/hooks/usePage";
import {
  getCompetitionListPage,
  withdrawalRegistration,
  auditCompetitionStudent,
} from "@/api/manage/agentmenu/index.js";
import EntrystatusSelect from "@/components/entrystatus-select/index.vue";
import EventSelect from "@/components/event-select/index.vue";
import GroupsSelect from "@/components/groups-select/index.vue";
import InstitutionSelect from "@/components/institution-select/index.vue";
import OrganizingSelect from "@/components/organizing-select/index.vue";
import { useUserStore } from "@/store/user";
import { ActivatePlayerApi } from "@/api";
import ExportButton from "@/components/export-button/index.vue";
import { export_competition_columns } from "@/data/competition";
const userStore = useUserStore();
const {
  total,
  data,
  loading,
  query_data,
  handleLoad,
  handlePage,
  handleGetCustomList,
} = usePage({
  api_fn: getCompetitionListPage,
  q_data: {
    payStatus: "",
    agentId: "",
    institutionId: "",
    rootId: "",
    groupId: "",
    studentName: "",
    phone: "",
  },
});

/**
 * 操作命令
 */
const handleCommand = (command, row) => {
  // 撤销报名
  if (command == "cancellation-of-registration") {
    handleRegistration(row.studentId, row.eventId);
  } else if (command == "update-entryStatus-to-4") {
    // 激活绑定
    ElMessageBox.confirm("是否确定激活绑定此选手？", "激活绑定", {
      type: "success",
    }).then(async () => {
      // rootId
      let res = await ActivatePlayerApi({
        studentId: row.studentId,
        rootId: row.rootId,
        eventId: row.eventId,
      });
      if (!res.success) {
        ElMessage.error(res.message);
      } else {
        handleLoad(true);
        ElMessage.success(res.message);
      }
    });
  } else if (command == "update-entryStatus-to-3") {
    // 激活绑定
    ElMessageBox.confirm("确定是否修改该选手参赛状态为通过？", "通过", {
      type: "success",
    }).then(async () => {
      // rootId
      let res = await auditCompetitionStudent({
        studentId: row.studentId,
        status: 3,
        eventId: row.eventId,
      });
      if (!res.success) {
        ElMessage.error(res.message);
      } else {
        handleLoad(true);
        ElMessage.success(res.message);
      }
    });
  } else if (command == "update-entryStatus-to-1") {
    // 激活绑定
    ElMessageBox.confirm("确定是否修改该选手参赛状态为拒绝通过？", "拒绝通过", {
      type: "error",
    }).then(async () => {
      let res = await auditCompetitionStudent({
        studentId: row.studentId,
        status: 0,
        eventId: row.eventId,
      });
      if (!res.success) {
        ElMessage.error(res.message);
      } else {
        handleLoad(true);
        ElMessage.success(res.message);
      }
    });
  }
};

/**
 * 撤销报名
 */
const handleRegistration = (studentId, eventId) => {
  ElMessageBox.confirm("是否确定撤销报名", "撤销报名", {
    type: "error",
  }).then(async () => {
    let res = await withdrawalRegistration({ studentId, eventId });
    if (res.success) {
      ElMessage({
        title: "成功",
        message: res.message,
        type: "success",
      });
      handleLoad(true);
    } else {
      ElMessage.error(res.message);
    }
  });
};
/**
 * 修改参赛审核状态
 */
const handleSwitchEntryStatus = async (row) => {
  let res = await auditCompetitionStudent({
    studentId: row.studentId,
    status: row.entryStatus,
    eventId: row.eventId,
  });
  if (res.success) {
    ElMessage({
      title: "成功",
      message: res.message,
      type: "success",
    });
    handleLoad(true);
  } else {
    ElMessage.error(res.message);
  }
};
/**
 * 搜索接口
 */
const handleSearch = () => {
  handleLoad(true);
};

/**
 * 权限判断
 */
const handleRoleInit = () => {
  if (userStore.info_data.role == "agent") {
    query_data.value.agentId = userStore.info_data.userId;
  } else if (userStore.info_data.role == "organizing") {
    query_data.value.agentId = "";
  }
};

const is_show_organizing = computed(() => {
  return userStore.info_data.role == "organizing";
});
onMounted(() => {
  handleRoleInit();
  handleLoad(true);
});
</script>

<style lang="scss" scoped>
.header_information {
  padding: 20px;
  .header_name {
    margin-left: 10px;
    margin-right: 10px;
    .header_text {
      margin-left: -10px;
      margin-right: -10px;
    }
    h1 {
      font-size: 28px;
    }
    // 线
    .header_line {
      display: block;
      height: 1px;
      width: 100%;
      margin: 24px 0 20px 0;
      background-color: #8473f717;
    }
  }
  //   内容
  .el_row_btn {
    margin-bottom: 20px;
    .content {
      .content_top_btn {
        display: flex;

        justify-content: flex-end;
        .top_search_inp {
          width: 300px;
          height: 40px;
          margin-right: 5px;
        }
        .top_search_btn {
          width: 110px;
          margin-right: 5px;
        }
      }
    }
  }
  .el-radio {
    margin: 0 0 0 5px;
  }
  :deep(.el-table__cell) {
    padding: 12px 0 !important;
  }
  // 分页
  .pagination {
    margin-top: 30px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
  }
}
</style>